import {uSelectWebMoreDevDataAnalyse} from '@/api/dataOverview'
import {CCard} from '@/components/card'
import {DeviceName, IconImg, ParamOfStatus, ParamStatus} from '@/components/image'
import {CItemUpDown} from '@/components/item'
import RollerDigital from '@/components/rollerDigital'
import {CnBoldP, CnBoldSpan, CnMediumP, CnNormalP, CnNormalSpan} from '@/components/text'
import {WaterTargetEchart} from '@/components/waterTarget'
import useLoading from '@/hooks/loading'
import {getUserId} from '@/libs/auth'
import {toSingleDevParams, toExceptionManagement} from '@/libs/pageRedirect'

const WaterAnalyzeCardLayout = defineComponent({
  props: {
    loading: Boolean
  },
  setup(props, {slots}) {
    return () => (
      <CCard
        id='CBC-WaterAnalyzeCard'
        title='水质分析'
        class='col-span-1 bg-white rounded-4 h-500'
        loading={props.loading}
        skeletonProps={{paragraph: {rows: 10}}}
      >
        <div class='w-full h-full flex flex-col'>{slots.default?.()}</div>
      </CCard>
    )
  }
})

export const WaterAnalyzeCard = defineComponent({
  setup(props, ctx) {
    const {startLoading, closeLoading, loading, isSuccess} = useLoading()

    const state = reactive<{
      analyze: DataOverview.Analyze | null
    }>({
      analyze: null
    })

    const exhartSeriesData = computed(() => {
      console.log(state.analyze?.standRatioMap)

      const keys = Object.keys(
        state.analyze?.standRatioMap || {}
      ) as (keyof DataOverview.StandRatioPack)[]

      console.log(keys)

      if (keys.length === 0) return []
      const values = keys.map(key => {
        const value = state.analyze?.standRatioMap[key]
        return {name: key + '时段', value: value || 0}
      })
      const shiyiData = values.filter(item => item.name === '适宜时段')[0]
      const piangaoData = values.filter(item => item.name === '偏高时段')[0]
      const piandiData = values.filter(item => item.name === '偏低时段')[0]
      const guzhangData = values.filter(item => item.name === '故障时段')[0]
      return [shiyiData, piangaoData, piandiData, guzhangData]
    })

    function getAnalyze() {
      const userId = getUserId()
      if (!userId) return
      startLoading()

      uSelectWebMoreDevDataAnalyse({userId})
        .then(res => {
          state.analyze = res.data
          closeLoading(true)
        })
        .catch(err => {
          closeLoading(false)
        })
    }

    onMounted(() => {
      startLoading()
      getAnalyze()
    })

    return () =>
      loading.value ? (
        <WaterAnalyzeCardLoading></WaterAnalyzeCardLoading>
      ) : isSuccess.value ? (
        <WaterAnalyzeCardLayout>
          <div class='mt-20 h-48 flex items-center'>
            <IconImg imgName='warning-light' class='w-48 h-full mr-16'></IconImg>
            <div class='h-full flex flex-col'>
              <p class='flex-1 h-31'>
                <RollerDigital
                  class='text-24 mr-6'
                  endVal={state.analyze?.exceptionCount || 0}
                ></RollerDigital>
                <CnNormalSpan class='text-12'>次</CnNormalSpan>
              </p>
              <CnNormalP class='flex-1'>水质异常</CnNormalP>
            </div>
          </div>
          <div class='h-0 border-b border-splitLine mt-19'></div>
          <div class='pt-10 px-8'>
            <CnMediumP class='mb-18'>总体异常分布</CnMediumP>
            <div class='flex'>
              <WaterTargetEchart
                class='w-100 h-100'
                canvasId='WaterAnalyzeCard'
                seriesData={exhartSeriesData.value}
                width='100px'
                height='100px'
                tooltipTitle='异常时间占比'
                tooltipValueUnit='%'
              ></WaterTargetEchart>
              <div class='ml-24'>
                <div class='mb-16'>
                  <ParamOfStatus class='mr-24' status='适宜' isCircle={false}>
                    适宜
                  </ParamOfStatus>
                  <ParamOfStatus class='mr-24' status='偏高' isCircle={false}>
                    偏高
                  </ParamOfStatus>
                  <ParamOfStatus class='mr-24' status='偏低' isCircle={false}>
                    偏低
                  </ParamOfStatus>
                  <ParamOfStatus class='' status='故障' isCircle={false}>
                    故障
                  </ParamOfStatus>
                </div>
                <CnNormalSpan class='text-12 mr-18'>适宜时段</CnNormalSpan>
                <CnBoldSpan class='text-12 text-success'>
                  {state.analyze?.standRatioMap['适宜']}%
                </CnBoldSpan>
                <br></br>
                <CnNormalSpan class='text-12 mr-18'>偏高时段</CnNormalSpan>
                <CnBoldSpan class='text-12 text-danger'>
                  {state.analyze?.standRatioMap['偏高']}%
                </CnBoldSpan>
                <br></br>
                <CnNormalSpan class='text-12 mr-18'>偏低时段</CnNormalSpan>
                <CnBoldSpan class='text-12 text-warning'>
                  {state.analyze?.standRatioMap['偏低']}%
                </CnBoldSpan>
                <br></br>
                <CnNormalSpan class='text-12 mr-18'>故障时段</CnNormalSpan>
                <CnBoldSpan class='text-12 text-info'>
                  {state.analyze?.standRatioMap['故障']}%
                </CnBoldSpan>
                <br></br>
              </div>
            </div>
            <div class='h-0 border-b border-splitLine mt-10'></div>
            <div class='h-144 overflow-hidden'>
              {state.analyze?.deviceExceptionPackList.map(item => (
                <CItemUpDown
                  class='pt-10 pr-8 pb-10 pl-16'
                  v-slots={{
                    title: () => <DeviceName>{item.devName}</DeviceName>
                  }}
                  subTitle='2022-07-03 08:24:46'
                >
                  <div class='h-18'>
                    <span class='inline-flex items-center'>
                      <ParamStatus status={item.paramStatus}></ParamStatus>
                      <CnNormalSpan class='text-12'>{item.paramName}</CnNormalSpan>
                    </span>
                    <CnNormalSpan class='ml-32 text-12'>{item.paramValue}</CnNormalSpan>
                    <CnNormalSpan class='text-12'>{item.paramUnit}</CnNormalSpan>
                    <CnNormalSpan class='ml-32 text-12'>{item.paramStatus}</CnNormalSpan>
                  </div>
                </CItemUpDown>
              ))}
            </div>
            <div class='flex justify-end items-start'>
              {/* <a-button
                class='bg-primaryLight h-28'
                onClick={() => {
                  toExceptionManagement()
                }}
              >
                <CnNormalSpan class='text-primary text-12'>查看</CnNormalSpan>
              </a-button> */}
            </div>
          </div>
        </WaterAnalyzeCardLayout>
      ) : (
        <WaterAnalyzeCardEmpty></WaterAnalyzeCardEmpty>
      )
  }
})

export const WaterAnalyzeCardEmpty = defineComponent({
  setup() {
    return () => (
      <WaterAnalyzeCardLayout>
        <div class='w-full h-full flex items-center justify-center'>
          <a-empty description='数据获取失败' />
        </div>
      </WaterAnalyzeCardLayout>
    )
  }
})

export const WaterAnalyzeCardLoading = defineComponent({
  setup() {
    return () => <WaterAnalyzeCardLayout loading={true}></WaterAnalyzeCardLayout>
  }
})
